<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="${basePath}/static/lib/designer/pc/index/bootstrap-4.2.1.css">
    <link rel="stylesheet" type="text/css" href="${basePath}/static/lib/designer/pc/index/font-awesome.5.81.all.css">
    <link rel="stylesheet" href="${basePath}/static/lib/designer/pc/index/style.css">
    <link rel="stylesheet" href="${basePath}/static/lib/designer/pc/index/ui-container.css">
    <link rel="stylesheet" href="${basePath}/static/lib/designer/css/dp-style.css">
    <link rel="stylesheet" type="text/css" href="${basePath}/static/lib/spectrum/spectrum.css">
    <link rel="stylesheet" href="${basePath}/static/css/common/toucan-form-validate.css" />

    <#include "/title.html"/>

    <#include "/shop_common.html"/>
</head>
<body>

<#include "/top.html"/>

<#assign leftName = "pageDesigner">
<#assign menuType = "shopSetting">



<div class="body_box">

    <ol class="breadcrumb breadcrumb-arrow">
        <li class="breadcrumb-item">
            <a href="${basePath}/index" class="coolc icon-weizhi" href="javascript:;">管理中心</a>
        </li>
        <li class="breadcrumb-item">
            <a href="${basePath}/page/designer/index">页面装修</a>
        </li>
        <li class="breadcrumb-item">
            <a href="javascript:;">PC首页装修</a>
        </li>
    </ol>


    <div class="left_menu">
        <#include "/left.html"/>
    </div>

    <input type="hidden" id="position" value="1" />

    <div class="right_content">
        <div class="right_bg mb-15" style="width:100%">
            <div class="index_top_left" style="width:100%">
                <div class="right_panel">

                    <div style="background: white;" >
                        <div>
                            <form id="designerPanelForm">
                            <section class="el-container container-main">
                                <aside class="el-aside main-right" style="width: 250px;">
                                    <header class="el-header header-title" style="height: 60px;font-size: 15px;">常用组件</header>
                                    <div class="draggable-container">
                                        <div class="widget-holder " style="height:600px;">
                                            <div class="fg-widget custom-widget custom-widget-handle " attr-compoent-type="shopBanner" attr-component-name="店铺轮播图" title="店铺轮播图">
                                                <i class="fa fa-chevron-right fg-resize-widget" aria-hidden="true"></i>
                                                <i class="fa fa-times fg-remove-widget" title="移除"></i>
                                                <i class="fas fa-arrows-alt move-widget fg-widget-handle" title="移动"></i>
                                                <div class="fg-widget-inner fg-widget-inner-bg-color designer-component-banner-bg">
                                                    <label class="fg-widget-handle" style="widht:100%;height:100%" >轮播图</label>
                                                </div>
                                            </div>
                                            <div class="fg-widget custom-widget custom-widget-handle ">
                                                <i class="fa fa-chevron-right fg-resize-widget" aria-hidden="true"></i>
                                                <i class="fa fa-times fg-remove-widget" title="remove this widget"></i>
                                                <i class="fas fa-arrows-alt move-widget fg-widget-handle"></i>
                                                <div class="fg-widget-inner fg-widget-inner-bg-color"><label class="fg-widget-handle" style="widht:100%;height:100%">店铺分类</label></div>
                                            </div>
                                            <div class="fg-widget custom-widget custom-widget-handle ">
                                                <i class="fa fa-chevron-right fg-resize-widget" aria-hidden="true"></i>
                                                <i class="fa fa-times fg-remove-widget" title="remove this widget"></i>
                                                <i class="fas fa-arrows-alt move-widget fg-widget-handle"></i>
                                                <div class="fg-widget-inner fg-widget-inner-bg-color"><label class="fg-widget-handle" style="widht:100%;height:100%">热门商品</label></div>
                                            </div>
                                        </div>
                                    </div>
                                </aside>
                                <section class="el-container is-vertical">
                                    <header class="el-header main-bottom header-padding" style="height: 60px;">
                                            <span class="header-tags el-tag  el-tag--small el-tag--plain">
                                                <span class="publish-btn">保存发布</span>
                                            </span>
                                            <span class="header-tags el-tag el-tag--small el-tag--plain">
                                                <span class="preview-btn">预览</span>
                                            </span>
                                    </header>
                                    <main class="el-main box-padding">
                                        <div class="widget-form-container">
                                            <div id="zone_div">
                                                <div class="flexgrid-container" style="width: 98%; height: 539px;">
                                                    <div class="flexgrid-grid"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </main>
                                </section>
                                <aside class="el-aside main-left" style="width: 250px;">
                                    <div class="el-tabs el-tabs--top" style="margin-top: -4px;">


                                        <div class="mt-tabpage" id="designerProperty">
                                            <div class="mt-tabpage-title">
                                                <a href="javascript:;" attr-page="mtc1" class="mt-tabpage-item mt-tabpage-item-cur">页面设置</a>
                                                <a href="javascript:;" attr-page="mtc2" class="mt-tabpage-item">组件属性</a>
                                            </div>
                                            <div class="mt-tabpage-count">
                                                <div class="mt-tabpage-content mtc1" >
                                                    <form action="">
                                                        <div class="form-group">
                                                            <label for="pageTitle">页面标题</label>
                                                            <input type="text" class="form-control" placeholder="请输入页面标题" id="pageTitle" lay-verify="required|shopName" >
                                                        </div>

                                                        <div class="form-group">
                                                            <label>背景样式</label>
                                                            <br>
                                                            &nbsp;&nbsp;
                                                            <input type="radio" name="bgType" id="bgType1" value="1" checked="checked"/>&nbsp;<label for="bgType1">背景色</label>
                                                            &nbsp;&nbsp;&nbsp;
                                                            <input type="radio" name="bgType" id="bgType2" value="2" />&nbsp;<label for="bgType2">背景图片</label>
                                                        </div>
                                                        <div class="form-group bgTypeColor" style="display:block">
                                                            <label>背景色</label>
                                                            <br>
                                                            <input type="hidden" class="selectColorControlVal" />
                                                            <input id="selectColorControl" />
                                                        </div>
                                                        <div class="form-group bgTypeImg" style="display:none">
                                                            <label >背景图片</label>

                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="mt-tabpage-content mtc2" >
                                                        222222222222222222222
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </aside>
                            </section>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>



<#include "/footer.html"/>


<!-- partial -->
<script src="${basePath}/static/js/jquery/jquery-1.10.2.js"></script>
<script src="${basePath}/static/js/jquery/jquery-ui-1.11.0.js"></script>
<script src='${basePath}/static/js/jquery/jquery.ui.touch-punch.min.js'></script>
<script src="${basePath}/static/js/seller/designer/pc/defineModel.js"></script>
<script src="${basePath}/static/js/seller/designer/pc/designerPanel.js"></script>
<script src="${basePath}/static/lib/spectrum/spectrum.js"></script>
<script src="${basePath}/static/js/seller/designer/pc/selectBgColor.js"></script>
<!--再次引用message -->
<script src="${basePath}/static/js/message.js"></script>
<link rel="stylesheet" href="${basePath}/static/css/message.css" />

<script type="text/javascript" src="${basePath}/static/js/common/toucan-form-validate.js"></script>
<script type="text/javascript" src="${basePath}/static/js/seller/designer/pc/index.js"></script>
</body>

</html>
